<template>
  <div class="paramss">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>参数列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <el-alert
        title="注意：只允许为第三级分类设置相关参数！"
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <div class="box">
        <span>选择商品分类：</span>
        <el-cascader
          v-model="value"
          :options="cartList"
          :props="prop"
          @change="handleChange"
        >
          <template slot-scope="{ node, data }">
            <span>{{ data.cat_name }}</span>
          </template>
        </el-cascader>
      </div>

      <!-- 动态参数，静态参数表格 -->
      <el-tabs v-model="activeName" :before-leave="beforeLeave">
        <el-tab-pane label="动态参数" name="many">
          <!-- 动态参数 -->
          <el-button
            type="primary"
            :disabled="value.length > 0 ? false : true"
            @click="addMany"
            >添加参数</el-button
          >

          <!-- 表格 -->
          <!-- <el-table :data="manyList" border style="width: 100%">
            <el-table-column type="expand" label="">
              <template slot-scope="scope">
                <el-tag
                  :key="tag"
                  v-for="(tag, i) in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(i, scope.row)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.inputVisible"
                  v-model="scope.row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm(scope.row)"
                  @blur="handleInputConfirm(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>

            <el-table-column
              type="index"
              width="50"
              label="#"
            ></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="editClick(scope.row)"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  >编辑</el-button
                >

                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="delClick(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table> -->

          <many-list :list="manyList" @editClick="editClick"></many-list>
        </el-tab-pane>

        <el-tab-pane label="静态参数" name="only">
          <!-- 静态参数 -->
          <el-button
            type="primary"
            :disabled="value.length > 0 ? false : true"
            @click="addMany"
            >添加参数</el-button
          >
          <!-- 表格 -->
          <!-- <el-table :data="onlyList" border style="width: 100%">
            <el-table-column type="expand" label="">
              <template slot-scope="scope">
                <el-tag
                  :key="tag"
                  v-for="(tag, i) in scope.row.attr_vals"
                  closable
                  :disable-transitions="false"
                  @close="handleCloses(i, scope.row)"
                >
                  {{ tag }}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="scope.row.inputVisibles"
                  v-model="scope.row.inputValues"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirms(scope.row)"
                  @blur="handleInputConfirms(scope.row)"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInputs(scope.row)"
                  >+ New Tag</el-button
                >
              </template>
            </el-table-column>

            <el-table-column
              type="index"
              width="50"
              label="#"
            ></el-table-column>
            <el-table-column
              label="参数名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template slot-scope="scope">
                <el-button
                  @click="editClicks(scope.row)"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  >编辑</el-button
                >

                <el-button
                  type="danger"
                  size="mini"
                  icon="el-icon-delete"
                  @click="delClicks(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table> -->

          <many-list :list="onlyList" @editClick="editClick"></many-list>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!--动态列表 -->
    <el-dialog :title="activeName=='many'?editmanyId?'编辑动态参数':'添加动态参数':editmanyId?'编辑静态参数':'添加静态参数'" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="attr_name">
          <el-input v-model="ruleForm.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="manyYesr('ruleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 静态列表 -->
    <!-- <el-dialog title="添加静态参数" :visible.sync="dialogVisibles" width="50%">
      <el-form
        :model="ruleForms"
        :rules="ruless"
        ref="ruleForms"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动名称" prop="attr_name">
          <el-input v-model="ruleForms.attr_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="onlyYesr('ruleForms')"
          >确 定</el-button
        >
      </span>
    </el-dialog> -->
  </div>
</template>
<script>
import {
  Categories,
  attributesMany,
  getaddMany,
  Deletemany,
  Manyedit,
  attributesOnly,
} from "../utils/http";
import _ from "lodash";
import ManyList from "@/components/ManyList.vue";
export default {
  components: {
    ManyList,
  },
  data() {
    return {
      type: [1, 2, 3], //商品数据类列表显示一层二层三层分类列表
      prop: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      value: [], //获取商品分类列表id
      cartList: [], //获取商品分类列表数据
      activeName: "many", //默认选中动态参数
      onlyList: [], //保存静态数据
      manyList: [], //保存动态数据
      tagManylist: [], //保存动态参数标签
      inputValue: "", //动态参数tag
      inputVisible: false, //默认隐藏tag
      dialogVisible: false, ///动态参数弹出框
      ruleForm: {
        //动态参数
        attr_name: "",
      },
      rules: {
        attr_name: [
          { required: true, message: "请输入动态参数", trigger: "blur" },
        ],
      },
      editmanyId: "", //保存修改动态id
      manyId: "", //保存动态分类参数id
      tagOnlylist: [], //保存静态参数标签
      editonlyId: "", //保存修改静态id
      ruleForms: {
        //静态参数
        attr_name: "",
      },
      ruless: {
        attr_name: [
          { required: true, message: "请输入静态参数", trigger: "blur" },
        ],
      },
      dialogVisibles: false, ///静态参数弹出框
      inputVisibles: false, //静态tag添加
      inputValues: "", //静态tag添加内容
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      Categories(this.type).then((res) => {
        // console.log(res);
        this.cartList = res.data;
      });
    },
    //通过商品列表获取动态参数、静态参数
    handleChange(val) {
      // console.log(val);
      //获取动态参数
      //   this.manyId = val[2];
      attributesMany({ id: this.value[2], sel: "many" }).then((res) => {
        // console.log(res);
        res.data.forEach((item) => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
          item.inputVisible = false;
          item.inputValue = "";
        });
        // console.log(this.tagManylist);
        this.manyList = res.data;
      });
      //获取静态参数
      attributesOnly({ id: this.value[2], sel: "only" }).then((res) => {
        console.log(res);

        res.data.forEach((item) => {
          item.attr_vals = item.attr_vals ? item.attr_vals.split(" ") : [];
          item.inputVisible = false;
          item.inputValue = "";
        });
        this.onlyList = res.data;
      });
    },
    //动态、静态切换时触发
    beforeLeave(to, from) {
      //   console.log(to, from);
    },

    //editClick动态参数编辑
    editClick(row) {
      // console.log(row);
      if (row.attr_sel == "many") {
        this.editmanyId = row.attr_id;
        this.ruleForm = { ...row };
        this.dialogVisible = true;
      } else {
        this.editmanyId = row.attr_id;
        this.ruleForm = { ...row };
        this.dialogVisible = true;
      }
    },
    //添加动态参数addMany
    addMany() {
      if (this.activeName == "many") {
        this.dialogVisible = true;
        this.editmanyId = "";
        this.ruleForm = {};
      } else {
        this.dialogVisible = true;
        this.editmanyId = "";
        this.ruleForm = {};
      }
    },
    //确定添加动态参数
    manyYesr(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //   alert("submit!");
          if (this.editmanyId) {
            //修改动态参数
            this.ruleForm.attr_vals=this.ruleForm.attr_vals.join(' ')
            Manyedit(this.ruleForm).then((res) => {
              if (res.meta.status == 200) {
                this.handleChange();
                // this.getList()
                this.dialogVisible = false;
                this.$message({
                  type: "success",
                  message: res.meta.msg,
                });
              } else {
                this.$message({
                  type: "danger",
                  message: res.meta.msg,
                });
              }
            });
          } else {
            //添加动态参数
            if (this.activeName == "many") {
              let obj = {
                id: this.value[2],
                attr_name: this.ruleForm.attr_name,
                attr_sel: "many",
                //   attr_vals:this.ruleForm.attr_vals
              };
              getaddMany(obj).then((res) => {
                console.log(res);
                if (res.meta.status == 201) {
                  this.handleChange();
                  // this.getList()
                  this.dialogVisible = false;
                  this.$message({
                    type: "success",
                    message: res.meta.msg,
                  });
                } else {
                  this.$message({
                    type: "danger",
                    message: res.meta.msg,
                  });
                }
              });
            } else {
              let obj = {
                id: this.value[2],
                attr_name: this.ruleForm.attr_name,
                attr_sel: "only",
                //   attr_vals:this.ruleForm.attr_vals
              };
              getaddMany(obj).then((res) => {
                console.log(res);
                if (res.meta.status == 201) {
                  this.handleChange();
                  // this.getList()
                  this.dialogVisible = false;
                  this.$message({
                    type: "success",
                    message: res.meta.msg,
                  });
                } else {
                  this.$message({
                    type: "danger",
                    message: res.meta.msg,
                  });
                }
              });
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加动态参数handleInputConfirm
    // handleInputConfirm(row) {
    //   if (row.inputValue.trim().length === 0) {
    //     row.inputValue = "";
    //     row.inputVisible = false;
    //     return;
    //   }
    //   row.attr_vals.push(row.inputValue.trim());
    //   row.inputValue = "";
    //   row.inputVisible = false;
    //   this.setAttr_vale(row);
    // },
    // setAttr_vale(row) {
    //   let obj = {
    //     cat_id: row.cat_id,
    //     attr_name: row.attr_name,
    //     attr_sel: row.attr_sel,
    //     attr_vals: row.attr_vals.join(" "),
    //     attr_id: row.attr_id,
    //   };

    //   Manyedit(obj).then((res) => {
    //     if (res.meta.status == 200) {
    //       this.handleChange();
    //       // this.getList()
    //       this.$message({
    //         type: "success",
    //         message: res.meta.msg,
    //       });
    //     } else {
    //       this.$message({
    //         type: "danger",
    //         message: res.meta.msg,
    //       });
    //     }
    //   });
    // },
    //handleClose删除此tag
    // handleClose(val) {
    //   // console.log(val);
    //   val.row.attr_vals.splice(val.i, 1);
    //   this.setAttr_vale(val.row);
    // },
    //添加showInput动态参数tag
    // showInput(row) {
    //   row.inputVisible = true;
    //   this.$nextTick((_) => {
    //     this.$refs.saveTagInput.$refs.input.focus();
    //   });
    // },
    //添加静态addOnly参数
    // addOnly() {
    //   this.dialogVisibles = true;
    //   this.editonlyId = "";
    //   this.ruleForms = {};
    // },
    //确定添加静态参数
    // onlyYesr(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       //   alert("submit!");
    //       if (this.editonlyId) {
    //         //修改静态参数
    //         this.ruleForm.attr_vals = this.ruleForm.attr_vals.split(" ");
    //         Manyedit(this.ruleForms).then((res) => {
    //           if (res.meta.status == 200) {
    //             this.handleChange();
    //             // this.getList()
    //             this.dialogVisibles = false;
    //             this.$message({
    //               type: "success",
    //               message: res.meta.msg,
    //             });
    //           } else {
    //             this.$message({
    //               type: "danger",
    //               message: res.meta.msg,
    //             });
    //           }
    //         });
    //       } else {
    //         //添加静态参数
    //         let obj = {
    //           id: this.value[2],
    //           attr_name: this.ruleForms.attr_name,
    //           attr_sel: "only",
    //           // attr_vals:this.ruleForm.attr_vals.trim().split(" ")
    //         };
    //         getaddMany(obj).then((res) => {
    //           console.log(res);
    //           if (res.meta.status == 201) {
    //             this.handleChange();
    //             // this.getList()
    //             this.dialogVisibles = false;
    //             this.$message({
    //               type: "success",
    //               message: res.meta.msg,
    //             });
    //           } else {
    //             this.$message({
    //               type: "danger",
    //               message: res.meta.msg,
    //             });
    //           }
    //         });
    //       }
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    //静态参数
    // handleCloses(val) {
    //   val.row.attr_vals.splice(val.i, 1);
    //   this.setAttr_vale(val.row);
    // },
    //静态参数tag
    // handleInputConfirms(row) {
    //   if (row.inputValues.trim().length === 0) {
    //     row.inputValues = "";
    //     row.inputVisibles = false;
    //     return;
    //   }
    //   row.attr_vals.push(row.inputValues.trim());
    //   row.inputValues = "";
    //   row.inputVisibles = false;
    //   this.setAttr_vale(row);
    // },
    //showInputs添加tag
    // showInputs(row) {
    //   row.inputVisibles = true;
    //   this.$nextTick((_) => {
    //     this.$refs.saveTagInput.$refs.input.focus();
    //   });
    // },
    // //修改静态edit
    // editClicks(row) {
    //   this.editonlyId = row.attr_id;
    //   this.ruleForms = { ...row };
    //   this.dialogVisibles = true;
    // },
    // //删除静态del
    // delClicks(row) {
    //   this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //     .then(() => {
    //       Deletemany({ cat_id: row.cat_id, attr_id: row.attr_id }).then(
    //         (res) => {
    //           //   console.log(res);
    //           this.handleChange();
    //         }
    //       );
    //       this.$message({
    //         type: "success",
    //         message: "删除成功!",
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消删除",
    //       });
    //     });
    // },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-breadcrumb {
  margin-bottom: 20px;
}
::v-deep .el-tag + .el-tag {
  margin-left: 10px;
}
::v-deep .button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
::v-deep .input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>